<template>
  <div class="menulist">
    <div class="rateContent">
      <div class="sibarLeft">
        <div style="margin-bottom: 5px;">
          <!--      :disabled="bomCost('per:insertDictree')"    -->
          <el-button type="primary" size="mini" @click.native="addGroup">
            {{ $t('market.addGroup') }}<!--新增分组-->
          </el-button>
          <el-button type="warning" size="mini" @click.native="editGroup">
            {{ $t('market.editGroup') }}<!--编辑分组-->
          </el-button>
        </div>
        <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" />
        <el-tree
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          node-key="realId"
          :default-expanded-keys="upfold"
          highlight-current
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="table-content">
        <el-button size="mini" style="margin-bottom: 5px" @click="newlys">{{ $t('btn.newHang') }}<!--新增行--></el-button>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          :table-height="tableHeight"
        >
          <el-table-column :label="$t('shop.numIndex')" prop="fid" align="center" width="50" />
          <el-table-column :label="$t('market.dataName')" prop="fname" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fname" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('shop.fnumber')" prop="fnumber" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fnumber" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.descrip')" prop="fdescripTion" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fdescripTion" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fvalue')" prop="fvalue" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fvalue" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.descrip2')" prop="fdescripTion2" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fdescripTion2" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fvalue2')" prop="fvalue2" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fvalue2" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.descrip3')" prop="fdescripTion3" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fdescripTion3" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fvalue3')" prop="fvalue3" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fvalue3" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('shop.type')" prop="typeName" align="center" />
          <el-table-column :label="$t('market.isDisable')" prop="isDisable" align="center" width="120">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.isDisable">
                <el-radio :label="0">{{ $t('market.yes') }}</el-radio>
                <el-radio :label="1">{{ $t('market.no') }}</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.handle')" align="center" width="140">
            <template slot-scope="scope">
              <el-button v-if="scope.row.fid" type="warning" size="mini" @click="editDetail(scope.row)">{{ $t('btn.edit') }}</el-button>
              <el-button v-if="scope.row.fid" type="danger" size="mini" @click="delDetail(scope.row)">{{ $t('shop.delete') }}</el-button>
              <el-button v-else type="primary" size="mini" @click="preserve(scope.row)">{{ $t('btn.save') }}</el-button>
            </template>
          </el-table-column>
        </jc-table>
        <div class="footer">
          <jc-pagination
            v-show="total > 0"
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="getRateList"
          />
        </div>
      </div>
    </div>
    <!--  数据字典  -->
    <el-dialog
      v-dialogDrag
      :title="rateTitle"
      model
      :visible.sync="rateVisable"
      :close-on-click-modal="false"
      center
      width="500px"
    >
      <el-form label-width="100px" :model="groupData">
        <el-form-item :label="$t('market.nodename')">
          <el-input v-model="groupData.fname" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.viewname')">
          <el-input v-model="groupData.viewname" size="mini" :disabled="rateTitle === $t('market.dictionaryedit')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rateVisable = false">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="insertGroup">{{ $t('btn.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryDictionaryTree,
  insertDictionaryTree,
  updateDictionaryTree,
  insertDataDictionary,
  updateDataDictionary,
  delDataDictionary,
  queryDataDictionaryList
} from '@/api/basicManagement/dictionary'
import { toMxBmina } from '@/components/ToMxamineState'
export default {
  name: 'Dictionary',
  data() {
    return {
      fbillNo: 'fgroupName',
      treeData: [
        {
          nodeName: this.$t('market.all'),
          realId: 0,
          childList: []
        }
      ],
      defaultProps: {
        children: 'childList',
        label: 'nodeName'
      },
      rateTitle: '新增数据字典',
      rateVisable: false, // 数据字典弹窗
      groupData: {
        fname: '',
        viewname: ''
      },
      upfold: [0], // 展开
      tableData: [],
      tableHeader: [],
      filterText: '',
      tableHeight: '78vh',
      total: 0,
      currentPage: 1,
      size: 200
    }
  },
  watch: {
    // 过滤
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getMenuList() // 数据字典
    this.tableHeader1 = this.tableHeader
  },
  methods: {
    // 菜单数据
    async getMenuList() {
      const { data: res } = await queryDictionaryTree({})
      this.treeData[0].childList = res
    },
    // 点击菜单
    handleNodeClick(data, node) {
      this.groupData = data
      this.realId = data.realId
      this.getRateList()
    },
    // 新增
    addGroup() {
      this.groupData = {
        fname: '',
        viewname: '',
        fparentId: this.realId
      }
      this.rateVisable = true
      this.rateTitle = this.$t('market.dictionaryAdd') // 新增数据字典
    },
    insertGroup() {
      if (!this.groupData.treeId) {
        insertDictionaryTree({ ...this.groupData }).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            // this.upfold[1] = res.data.fparentId
            this.rateVisable = false
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      } else {
        const DATA = {
          fname: this.groupData.fname,
          viewname: this.groupData.viewname,
          treeId: this.groupData.treeId
        }
        updateDictionaryTree(DATA).then(res => {
          if (res.code === 0) {
            this.getMenuList()
            this.rateVisable = false
            this.$message({
              showClose: true,
              message: res.message,
              type: 'success'
            })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      }
    },
    // 修改数据字典
    editGroup() {
      this.groupData = {
        fname: this.groupData.nodeName,
        viewname: this.groupData.otherInfo.viewname,
        treeId: this.groupData.realId
      }
      this.rateVisable = true
      this.rateTitle = this.$t('market.dictionaryedit') // 修改数据字典
    },
    // 数据字典列表
    getRateList() {
      const DATA = {
        treeId: this.realId || 0,
        pageNum: this.currentPage,
        pageSize: this.size
      }
      queryDataDictionaryList(DATA).then(res => {
        if (res.code !== 0) {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
        this.tableData = res.data.list.map(item => {
          return toMxBmina(item)
        })
        this.total = res.data.total
      })
    },
    // 新增数据字典明细
    preserve(ev) {
      insertDataDictionary({ ...ev, treeId: this.realId }).then(res => {
        if (res.code === 0) {
          this.getRateList()
          this.rateListVisable = false
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 修改数据字典明细
    editDetail(ev) {
      updateDataDictionary({ ...ev }).then(res => {
        if (res.code === 0) {
          this.getRateList()
          this.val = []
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            type: 'error'
          })
        }
      })
    },
    // 删除
    delDetail(ev) {
      this.$confirm('确定要删除么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        delDataDictionary({ fid: ev.fid }).then(res => {
          if (res.code === 0) {
            this.getRateList()
            this.rateListVisable = false
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'error'
            })
          }
        })
      })
    },
    // 过滤
    filterNode(value, data) {
      if (!value) return true
      return data.nodeName.indexOf(value) !== -1
    },
    // 新增行(数据明细列表)
    newlys() {
      this.tableData.push({
        fname: '',
        isDisable: 0,
        typeName: '',
        fnumber: '',
        fvalue: '',
        fdescripTion: '',
        fvalue2: '',
        fdescripTion2: '',
        fvalue3: '',
        fdescripTion3: ''
      })
    }
  }
}
</script>

<style scoped lang="scss">
.menulist {
  @include listBom;
  .header {
    position: relative;
    .header-name {
      width: 100%;
    }
    .btn {
      transform: translateY(18%);
      margin-left: 450px !important;
    }
  }
  .rateContent {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 5px;
    position: relative;
    .sibarLeft {
      width: 20%;
      min-width: 270px;
      max-height: calc(100vh - 130px);
      overflow: auto;
      border-right: 1px solid #eee;
    }
    .table-content {
      width: 80%;
      margin-left: 10px;
    }
  }
}
</style>
